<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="shortcut icon" href="img/touchicon.png"/>
	<link rel="stylesheet" href=""/>
	<style type="text/css">
		.clearfix:after{content:'.';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
		.clearfix{zoom:1;}

	</style>
</head>
<body>
	<input type="button" id="btn" value="button">
	<script>
		window.onpopstate = function(event) {
		  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
		};
		history.pushState({page: 1}, "title 1", "?page=1");
		history.pushState({page: 2}, "title 2", "?page=2");
		history.replaceState({page: 3}, "title 3", "?page=3");
		history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
		history.back(); // alerts "location: http://example.com/example.html, state: null
		history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
	</script>
</body>
</html>